<template>
	<view>
		<view :class="type?'edit-item':'look-item'">
			<view class="flex align-center">
				<view class="title">车牌号</view>
				<view class="value" v-if="!type">{{location_index >= 0?pickerLict.location_list[location_index].name : ''}}{{plate_number || "-"}}</view>
				<view class="flex align-center" v-if="type">
					<view class="picker-veh">
						<picker mode="selector" :range="pickerLict.location_list" range-key="name" :value="location_index" @change="pickerChange($event,'location_index')">
							<view class="flex align-center">
								<view v-if="location_index >= 0">{{pickerLict.location_list[location_index].name}}</view>
								<image src="../../static/images/bottom.png" mode=""></image>
							</view>
						</picker>
					</view>
					<input class="edit-font" type="text" v-model="plate_number" placeholder="请输入车牌号">
				</view>
			</view>
			<view class="flex align-center">
				<view class="title must">车牌品牌</view>
				<view class="value" v-if="!type">{{car_brand || '-'}}</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font w-max-100" type="text" v-model="car_brand" placeholder="请输入" />
				</view>
				<!-- <view class="flex align-center justify-between w-max-100" v-if="type" @click="selectPower">
					<view class="edit-font">{{car_brand.name || '-'}}</view>
					<image class="right-icon" src="../../static/images/right.png"></image>
				</view> -->
			</view>
			<view class="flex align-center">
				<view class="title must">车身颜色</view>
				<view class="value" v-if="!type">{{ car_color || '-' }}</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font w-max-100" type="text" v-model="car_color" placeholder="请输入" />
				</view>
				<!-- <picker v-if="type" :range="pickerLict.color_list" range-key="name" :value="color_index" @change="pickerChange($event, 'color_index')" class="w-max-100">
					<view class="flex align-center justify-between w-max-100">
						<view class="edit-font">{{ color_index >= 0 ? pickerLict.color_list[color_index].name : '' }}</view>
						<image class="right-icon" src="../../static/images/right.png" mode=""></image>
					</view>
				</picker> -->
			</view>
			<view class="flex align-center">
				<view class="title must">整车编码</view>
				<view class="value" v-if="!type">{{ car_code || '-' }}</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font w-max-100" type="text" v-model="car_code" placeholder="请输入" />
				</view>
			</view>
			<view class="flex align-center">
				<view class="title">车辆型号</view>
				<view class="value" v-if="!type">{{ car_model || '-' }}</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font w-max-100" type="text" v-model="car_model" placeholder="请输入" />
				</view>
			</view>
			<view class="flex align-center mb-2">
				<view class="title">生产厂商</view>
				<view class="value" v-if="!type">{{ manufacturer || '-' }}</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font w-max-100" type="text" v-model="manufacturer" placeholder="请输入" />
				</view>
			</view>
			
			<view class="flex align-center">
				<view class="title must">电池类型</view>
				<view class="value" v-if="!type">{{ type_index >= 0 ? pickerLict.type_list[type_index].name : '-' }}</view>
				<picker v-if="type" :range="pickerLict.type_list" range-key="name" :value="type_index" @change="pickerChange($event, 'type_index')" class="w-max-100">
					<view class="flex align-center justify-between w-max-100">
						<view class="edit-font">{{ type_index >= 0 ? pickerLict.type_list[type_index].name : '' }}</view>
						<image class="right-icon" src="../../static/images/right.png"></image>
					</view>
				</picker>
			</view>
			
			<view class="flex align-center">
				<view class="title">电池标签1</view>
				<view class="value" v-if="!type">{{ label_one || '-' }}</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font w-max-100" type="text" v-model="label_one" placeholder="请输入" />
				</view>
			</view>
			
			<view class="flex align-center">
				<view class="title must">电池使用年限1</view>
				<view class="value" v-if="!type">{{ battery_year_picker[battery_year_one_index] || '' }}</view>
				<picker v-if="type" mode="selector" :range="battery_year_picker" :value="battery_year_one_index" @change="pickerChange($event, 'battery_year_one_index')" class="w-max-100">
					<view class="flex align-center justify-between w-max-100">
						<view class="edit-font">{{ battery_year_picker[battery_year_one_index] || '-' }}</view>
						<image class="right-icon" src="../../static/images/right.png" mode=""></image>
					</view>
				</picker>
			</view>
			
			<view class="flex align-center justify-between" :class="is_reserve == 0 ? 'mb-2':''">
				<view class="title">备用电池</view>
				<view class="value">
					<switch style="zoom: .8;" color="#49c265" :disabled="!type" :checked="is_reserve != 0? true:false" @change="is_reserve == 0 ? is_reserve = 1 : is_reserve = 0" />
				</view>
			</view>
			
			<view class="flex align-center" v-if="is_reserve != 0">
				<view class="title">电池标签2</view>
				<view class="value" v-if="!type">{{ label_two || '-' }}</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font w-max-100" type="text" v-model="label_two" placeholder="请输入" />
				</view>
			</view>
			
			<view class="flex align-center mb-2" v-if="is_reserve != 0">
				<view class="title must">电池使用年限2</view>
				<view class="value" v-if="!type">{{ battery_year_picker[battery_year_two_index] || '' }}</view>
				<picker v-if="type" class="w-max-100" mode="selector" :range="battery_year_picker" :value="battery_year_two_index" @change="pickerChange($event, 'battery_year_two_index')">
					<view class="flex align-center justify-between w-max-100">
						<view class="edit-font">{{ battery_year_picker[battery_year_two_index] || '-' }}</view>
						<image class="right-icon" src="../../static/images/right.png" mode=""></image>
					</view>
				</picker>
			</view>
			
			<view class="flex align-center">
				<view class="title">盗抢险单号</view>
				<view class="value" v-if="!type">{{ theft_protection || '-' }}</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font w-max-100" type="text" v-model="theft_protection" placeholder="请输入" />
				</view>
			</view>
			<view class="flex align-center">
				<view class="title">三责及意外险单号</view>
				<view class="value" v-if="!type">{{ insurance || '-' }}</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font w-max-100" type="text" v-model="insurance" placeholder="请输入" />
				</view>
			</view>
			
			<view>
				<view class="title mb-4">车辆照片</view>
				<view class="flex flex-wrap clzp-box">
					<view class="mb-2">
						<view class="img-box mb-2">
							<image v-if="!car_image" src="../../static/images/up-img.png"  @click="upFileImg('car_image')"></image>
							<image v-if="car_image && type" @click="car_image=''" class="clear-img" src="../../static/images/clear-img.png" mode=""></image>
							<image v-if="car_image" :src="car_image | imgUrl" @click.stop="lookImg(car_image)"></image>
						</view>
						<text :class="type?'select':''">车身照片</text>
					</view>
					<view class="mb-2">
						<view class="img-box mb-2">
							<image v-if="!qualified_image" src="../../static/images/up-img.png"  @click="upFileImg('qualified_image')"></image>
							<image v-if="qualified_image && type" @click="qualified_image=''" class="clear-img" src="../../static/images/clear-img.png" mode=""></image>
							<image v-if="qualified_image" :src="qualified_image | imgUrl" @click.stop="lookImg(qualified_image)"></image>
						</view>
						<view>车辆合格证</view>
					</view>
				</view>
			</view>
		</view>

		<view class="edit-btn" @click="sendType">{{type?'保存':'编辑'}}</view>
	</view>
</template>

<script>
	import { postCarLocationList, postUploadInfo, postCarInfo } from "../../api/home.js";
	import { upFile, url } from "../../utils/url.js";
	import util from "../../utils/util.js"
	export default {
		data() {
			return {
				type: false, // true 编辑  false 查看
				list: [],
				pickerLict: [],
				battery_year_picker: ['1年以下', '1~2年', '2~3年', '3~4年', '4~5年', '5年及以上'], // 电池使用年限
				location_index: -1, // 车牌号归属地
				color_index: -1, // 车辆颜色
				type_index: -1, // 电池类型
				battery_year_one_index: -1, // 电子使用年限1
				battery_year_two_index: -1, //  电池使用年限2
				
				car_color: "", // 车辆颜色
				car_brand: "", // 车辆品牌
				plate_number: "", //车牌号
				car_code: "", //车辆编码
				car_model: "" , // 车辆型号
				manufacturer: "" , // 生产厂商
				label_one: "", // 电子标签1
				is_reserve: 0, // 0没有  1有
				label_two: "", // 电子标签2
				theft_protection: "", // 盗抢险单号
				insurance: "", // 三责及意外险单号
				
				car_image: '', // 车辆照片
				qualified_image: '' , // 车辆合格证
			}
		},
		filters:{
			imgUrl(img) {
				if(img.indexOf('http') != -1) return img;
				if(img.indexOf('http') == -1) return url + img
			}
		},
		onLoad() {
			this.init();
		},
		onShow() {
			// uni.$once('brand',(res)=>{
			// 	this.car_brand = res
			// })
		},
		methods: {
			init(){
				this.getPickerList();
			},
			async getPickerList() {
				var res = await postCarLocationList()
				if(res.data.code == 1) this.pickerLict = res.data.data;
				this.lookCar();
			},
			
			
			// 查看车辆信息
			async lookCar() {
				var data = {};
				data.token = uni.getStorageSync('token')
				var res = await postCarInfo(data);
				if(res.data.code == 1) {
					var value = res.data.data;
					var pickerLict = this.pickerLict
					
					// 车牌归属地
					pickerLict.location_list.forEach((item,index) => {
						if(item.id == value.car_location_id) {
							this.location_index = index
						}
					})
					// 车牌号
					this.plate_number = value.plate_number
					
					// 车辆品牌
					this.car_brand = value.car_brand;
					
					// 车身颜色
					this.car_color = value.car_brand
					
					// 车牌品牌
					// pickerLict.brand_list.forEach((item,index) => {
					// 	if(item.id == value.car_brand_id) {
					// 		this.car_brand = item
					// 	}
					// })
					
					// 车辆颜色
					// pickerLict.color_list.forEach((item,index) => {
					// 	if(item.id == value.car_color_id) {
					// 		this.color_index = index
					// 	}
					// })
					
					// 整车编码
					this.car_code = value.car_code;
					// 车辆型号
					this.car_model = value.car_model;
					// 生产厂商
					this.manufacturer = value.manufacturer;
					
					// 电池类型
					pickerLict.type_list.forEach((item,index) => {
						if(item.id == value.battery_type_id) {
							this.type_index = index
						}
					})
					
					// 电子标签1
					this.label_one = value.label_one
					
					// 备用电池
					this.is_reserve = value.is_reserve
					// 电子标签2
					this.label_two = value.label_two
					
					// 电池使用年限
					this.battery_year_picker.forEach((item,index) => {
						if(item == value.battery_year_one) this.battery_year_one_index = index
						if(item == value.battery_year_two) this.battery_year_two_index = index
					})
					
					// 盗抢险单号
					this.theft_protection = value.theft_protection
					// 三责及意外险单号
					this.insurance = value.insurance
					// 车辆照片
					this.car_image = value.car_image
					// 车辆合格证
					this.qualified_image = value.qualified_image
				}
				
			},
			
			// picker
			pickerChange(e,key) {
				this[key] = e.detail.value;
			},
			
			// 上传图片
			upFileImg(key) {
				const self = this
				if(!self.type) return
				util.uploadImageOne({}, value => {
					self[key] = value.data.url;
				});
			},
			
			// 查看图片
			lookImg(url) {
				if(url != '') {
					uni.previewImage({
						current: url,
						urls: [url]
					})
				}
			},
			
			// 车牌品牌
			selectPower() {
				uni.navigateTo({
					url: "/pages/home/power"
				})
			},
			
			
			// 保存提交数据
			sendType() {
				var self = this;
				var type = this.type;
				if(type) {
					// 保存数据
					new Promise((resolve,reject) => {
						var data = {
							car_location_id: self.location_index >= 0 ? self.pickerLict.location_list[self.location_index].id : '', //车牌归属地
							plate_number: self.plate_number, // 车牌号
							car_brand: self.car_brand, // 车辆品牌
							car_color: self.car_color, // 车身颜色
							car_code: self.car_code, // 车辆编码
							car_model: self.car_model, // 车辆型号
							manufacturer: self.manufacturer, // 生产厂商
							battery_type_id: self.type_index >= 0 ? self.pickerLict.type_list[self.type_index].id : '', // 电池类型
							label_one: self.label_one, // 电子标签1
							battery_year_one: self.battery_year_one_index >= 0 ? self.battery_year_picker[self.battery_year_one_index] : '', // 电池使用年限1
							is_reserve: self.is_reserve, // 备用电池
							label_two : self.label_two, // 电子标签2
							battery_year_two : self.battery_year_two_index >= 0 ? self.battery_year_picker[self.battery_year_two_index] : '', //电池使用年限2
							theft_protection: self.theft_protection, //盗抢险单号
							insurance: self.insurance, // 三责及意外险单号
							car_image: self.car_image, // 车辆照片
							qualified_image: self.qualified_image, // 车辆合格证
						}
						if(uni.getStorageSync('token')) {
							data.token = uni.getStorageSync('token');
							resolve(data)
						} else {
							reject("请登录")
						}
					}).then( async res => {
						var value = await postUploadInfo(res)
						console.log(value)
						if(value.data.code == 1) {
							self.type = !type
						} else {
							uni.showToast({
								title: value.data.msg,
								icon: "none"
							})
						}
					}, err => {
						uni.showToast({
							title: err,
							icon: "none"
						})
					})
				} else {
					this.type = !this.type
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background: #f6f6f8;
	}

	/* 查看 */
	.look-item>view {
		width: 100%;
		padding: 30rpx;
		border-bottom: solid 1rpx #f2f2f2;
		background-color: #FFFFFF;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.look-item .title {
		font-size: 28rpx;
		color: #333;
	}

	.look-item .value {
		font-size: 26rpx;
		color: #686868;
	}

	.title {
		min-width: 180rpx;
		margin-right: 20rpx;
	}

	/* 编辑 */
	.edit-item>view {
		background-color: #FFFFFF;
		padding: 25rpx 30rpx;
		border-bottom: solid 1rpx #f4f4f4;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.edit-item .title {
		font-size: 24rpx;
		color: #545454;
	}

	.picker-veh {
		width: 110rpx;
	}

	.picker-veh image {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-font {
		font-size: 25rpx;
		color: #323232;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-item .must::before {
		content: "*";
		position: absolute;
		left: 12rpx;
		color: #ee0a24;

	}

	/* 编辑 保存 */
	.edit-btn {
		width: 690rpx;
		height: 80rpx;
		background-color: #49c265;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}

	.w-max-100 {
		width: 100%;
	}
	.img-box{
		width: 310rpx;
		height: 200rpx;
		position: relative;
	}
	.img-box image {
		width: 100%;
		height: 100%;
	}
	.img-box .clear-img {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		z-index: 99;
	}
	.clzp-box > view {
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 24rpx;
	}
	/* .clzp-box > view :nth-child(2n+n) {
		margin-right: 0 !important;
	} */
	
	.select {
		position: relative;
	}
	.select::before{
		content: "*";
		position: absolute;
		left: -15rpx;
		color: #ee0a24;
		font-size: 30rpx;
	}
	
</style>
